<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <style>
      * {
        font-family: sans-serif;
        margin: 0;
    }
    button {
        height: 40px;
        width: 200px;
    }
    .warning {
        background-color: red;
        text-align: center;
        width: 100%;
        padding: 10px;

        font-size: 14pt;
        color: white;
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">

    function WarningBanner(props){
        if(!props.warn){
            return null;
        }

        return (
            <div className="warning">
                Warning!
            </div>
        );
    }

    class Page extends React.Component{
        constructor(props){
            super(props);
            this.state = {showWarning:true};
            this.handleToggleClick = this.handleToggleClick.bind(this);
        }

        handleToggleClick(){
            this.setState(prevState=>({
                showWarning:!prevState.showWarning
            }));
        }

        render(){
            return <div>
                        <WarningBanner warn={this.state.showWarning}/>
                        <button onClick={this.handleToggleClick}>
                            {this.state.showWarning ? 'Hide':'Show'}
                        </button>
                    </div>;
        }
    }


    ReactDOM.render(
        <Page /> , document.getElementById('root'));
  </script>
  <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
</body>

</html> 